<template>
	<view class="formula-pages">
		<CustomNav :isBack="true" :topBgColor="topBgColor" title="联系巡察组"></CustomNav>
		<image src="@/static/image/home/bg.png" class="bg-img"></image>
		<view class="info-block" :style="'margin-top:'+mt">
			<template v-if="list.length>0">
				<view class="info-item" v-for="item in list" :key="item.id" :info="item">
					<view class="info-title">{{item.name}}</view>
					<view class="info-content">组长：{{item.groupLeader}}</view>
					<view style="display: flex;justify-content: space-between;">
						<view class="info-content">联系电话：{{item.phone}}</view>
						<view @click="callPhone(item.phone)" class="call">
							<view class="iconfont icon-dianhua"></view>拨打
						</view>
					</view>
					<view class="info-content">电子邮箱：{{item.email}}</view>
					<view class="info-content">巡察对象：{{item.inspection}}</view>
				</view>
			</template>
			<view v-else class="empty">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import{
		getPatrolGroupListApi
	} from'@/api/home.js'
	export default {
		components: {},
		data() {
			return {
				listParam: {
					limit: 10,
					page: 1,
					keyword: ''
				},
				list: [],
			}
		},
		methods: {
			getPatrolGroupList() {
				getPatrolGroupListApi().then(res => {
					this.list = res
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
		},
		onShow(e) {
			this.getPatrolGroupList()
		}
	}
</script>

<style lang="scss" scoped>
	.formula-pages {
		overflow: hidden;
		min-height: 100vh;
		background-color: #F7F6F9;

		.bg-img {
			width: 100%;
			height: 100%;
			position: absolute;
		}

		.info-block {
			position: relative;

			.search-block {
				width: $content-width;
				margin: 0 auto;
				height: 84rpx;
				background: #fff;
				border-radius: 20px;
				padding: 6rpx;
				display: flex;
				align-items: center;
				background-color: #F7F6F9;


				.iconfont {
					font-size: 44rpx;
					color: #4A8DFF;
					padding-left: 10rpx;
				}

				.search-input {
					height: 100%;
					flex-grow: 1;
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #AAAAAA;
				}

				.inputPlaceholder {
					color: #AAAAAA;
				}
			}

			.info-item {
				background-color: #ffffff;
				padding: 30rpx;
				margin-top: 40rpx;
				border-radius: 25rpx 25rpx 25rpx 25rpx;
				min-height: 28vh;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.info-title {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 30rpx;
				}

				.info-content {
					margin-top: 10rpx;
					font-size: 25rpx;
					line-height: 2;
				}

				.call {
					background-color: #3153b5;
					border-radius: 16px;
					border: 1px solid #3153b5;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 130rpx;
					height: 50rpx;
					font-size: 25rpx;
					color: #ffffff;

					.iconfont {
						font-size: 25rpx;
						color: #ffffff;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
</style>